<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
</head>
<body>
<h1>百度云人脸注册</h1>
<div id="name">
    用户名：<input type="text" name="username" id="username"/>
</div>
<div class="camera">
    <video id="video" width="350" height="200" src="" autoplay></video>
    <canvas id="canvas" width="350" height="200"></canvas>
</div>
<div class="reg">
    <button id="register">确定注册</button>
</div>
<script type="text/javascript">
    var video = document.getElementById('video');
    var userContext = canvas.getContext('2d');
    var getUserMedia = (navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)
    getUserMedia.call(navigator,{video:true,audio:false},function (localMediaStream){
        video.srcObject = localMediaStream;
    },function (e){console.log("获取本地视频流失败：")})
    var btn = document.getElementById('register');
    btn.onclick = function (){
        var username = $("#username").val();
        alert($("#username").val());
        if(username.trim().length!==0){
            userContext.drawImage(video,0,0,350,200);
            var userImgSrc = document.getElementById("canvas").toDataURL("img/jpg");
            var faceBase = userImgSrc.split(",")[1];
            $.ajax({
                url:"register",
                type:"POST",
            data:{"faceBase":faceBase,"username":username},
                success:function (result){
                    if(result==='1'){
                        alert("注册成功！")
                        window.location.href = "/toLogin";
                    }
                    else if(result==='2'){
                        alert("你已经注册过")
                    }
                    else{
                        alert("注册失败！")
                    }
                },
                error:function (e){
                    alert("后台繁忙中，请稍后再试")
                }
            })
        }else{
            alert("用户名不能为空！")
        }
    }
</script>

</body>
</html>